<template>
    <el-drawer
        title="修改订单"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
        <div id="box">
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="订单" :label-width="formLabelWidth">
                        <el-input v-model="form.orderName"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="受保时间"
                        :label-width="formLabelWidth"
                    >
                        <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="受保人" :label-width="formLabelWidth">
                        <el-input v-model="form.orderUserName"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="所属产品"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.orderType"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="订单价格"
                        :label-width="formLabelWidth"
                    >
                        <el-select v-model="form.orderPrice"> </el-select>
                    </el-form-item>
                    <el-form-item
                        label="销售人员"
                        :label-width="formLabelWidth"
                    >
                        <el-select v-model="form.orderSales"> </el-select>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="updateOrder"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import axios from "axios";
export default {
    beforeMount() {
        this.dialog = true;
    },
    created() {
        this.updateOrderById();
    },
    data() {
        return {  
              disabledDate(time) {
            return time.getTime() > Date.now();
          },                
            
            dialog: false,
            loading: false,
            table: false,
            dialog: false,
            loading: false,
            value1: '',
            form: {
                orderTime: "",
                orderName: "",
                orderType: "",
                orderPrice: "",
                orderSales: "",
                orderUserName: "",
                delivery: false,
            },
            formLabelWidth: "80px",
            timer: null,
        };
    },
    // mounted() {
    //     let id = this.$route.query.id;
    //     this.id = id
    //     if(id !=null) {
    //         this.dialog = true;
    //     }
    //     // console.log(id);
    // },
    mounted(){
        let id = this.$route.query.id;
        this.id = id;
        if (id != null) {
            this.dialog = true;
        }
        // console.log(id);
    },
    methods: {
        handleClose(done) {
            if (this.loading) {
                return;
            }
            this.$confirm("确定要提交表单吗？")
                .then((_) => {
                    this.loading = true;
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch((_) => {});
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },
        //获取订单ID
        async updateOrderById() {
            const { data } = await axios({
                url: "/orders/updateOrdersId",
                method: "get",
                params: {
                    _id: this.$route.query.id,
                },
            });
            // console.log(data);
            if ({ data: [data], status }) {
                this.form.orderTime = data.data[0].orderTime;
                this.form.orderName = data.data[0].orderName;
                this.form.orderType = data.data[0].orderType;
                this.form.orderSales = data.data[0].orderSales;
                this.form.orderPrice = data.data[0].orderPrice;
                this.form.orderUserName = data.data[0].orderUserName;
            }
        },
        //修改订单
        async updateOrder() {
            console.log(this.value1);
            const { data } = await axios({
                url: "/orders/updateOrders",
                method: "post",
                data: {
                    _id: this.$route.query.id,
                    orderTime: this.value1,                   
                    orderName: this.form.orderName,
                    orderType: this.form.orderType,
                    orderSales: this.form.orderSales,
                    orderPrice: this.form.orderPrice,
                    orderUserName: this.form.orderUserName,
                },
            });
            console.log(data);
            if (data.status) {
                alert("修改成功");
                this.$router.push("AllOrders");
            }
        },
    },
};
</script>

<style>
.demo-drawer__footer {
    text-align: center;
}
.el-date-editor--datetimerange.el-input__inner {
    width: 100%;
}
</style>